Saetl.net

Simple And Easy TempLate

blueimp Galleryの使い方

  1. 下記ページの ｢Download｣ よりファイル1式をダウンロード。
  2. ダウンロードしたファイルを任意の場所にコピー。
    ファイル構成

  3. 動作させるファイル（サンプルではindex.html）にコードを記述。
    ＜パスは上記ファイル構成の場合なので環境にあわせて変更＞
    ・head部分にcssファイルを読み込ませるためのコードを記述。 
    <head>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--ダウンロードしたファイル-->
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<link rel="stylesheet" href="css/blueimp-gallery-indicator.css">
</head>

    サンプルのstyle.cssコード

    /*ページ設定部分（style.cssなどで設定していれば削除する）*/
body {
	margin: 0;
	padding: 0;
	background: #fff;
}
.links {
	margin: 100px;
	text-align: center;
}
img {
	vertical-align: middle;
}

@media (max-width: 768px) {
.links {
	margin: 50px 10px;
}
}
/*ここまでページ設定部分*/
    ・</body>の直前にjsファイルを読み込ませるためのコードを記述。 
    <!--googleのCDN（ネットワーク経由でコンテンツを提供するサービス）よりjqueryをロード-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--ダウンロードしたファイル-->
<script src="js/blueimp-gallery.min.js"></script>
<script src="js/jquery.image-gallery.min.js"></script>
<script src="js/demo.js"></script>
    body></body>内にコードを記述。 
    <!--Flickr APIで画像表示-->
<div id="links" class="links"></div>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

    サンプルのhtmlコード

    <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>blueimp Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--ダウンロードしたファイル-->
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<link rel="stylesheet" href="css/blueimp-gallery-indicator.css">
</head>

<body>

<!--Flickr APIで画像表示-->
<div id="links" class="links"></div>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
  <div class="slides"></div>
  <h3 class="title"></h3>
  <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a>
  <ol class="indicator">
  </ol>
</div>

<!--googleのCDN（ネットワーク経由でコンテンツを提供するサービス）よりjqueryをロード-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--ダウンロードしたファイル-->
<script src="js/blueimp-gallery.min.js"></script>
<script src="js/jquery.image-gallery.min.js"></script>
<script src="js/demo.js"></script>
</body>
</html>
  4. ファイル1式をサーバーにアップロードして設置完了。
    サンプル